<template>
  <div id="hero">
    <div class="wrapper">
      <top-bar></top-bar>
      <top-header></top-header>
      <div class="main">
        <div class="choose-box">
          <div class="choose-item">
            人员名称：
            <el-input placeholder="请输入"
                      v-model="staffName"
                      clearable></el-input>
          </div>
          <div class="choose-item">
            人员等级：
            <el-select v-model="levelCode"
                       placeholder="请选择">
              <el-option label="全部"
                         value=""></el-option>
              <el-option v-for="item in lvArr"
                         :key="item.key"
                         :label="item.value"
                         :value="item.key">
              </el-option>
            </el-select>
          </div>
          <div class="choose-btn"
               @click="findHero">查询</div>
        </div>
        <div class="main-box">
          <div class="main-desc">
            人员等级说明：
            <div class="desc-item">
              <span class="square-icon red"></span>结构工程师
            </div>
            <div class="desc-item">
              <span class="square-icon blue"></span>电子工程师
            </div>
            <div class="desc-item">
              <span class="square-icon purple"></span>测试工程师
            </div>
            <div class="desc-item">
              <span class="square-icon orange"></span>工业设计工程师
            </div>
            <div class="desc-item">|</div>
            <div class="desc-item">
              <span class="lv-icon lv-ss"></span>S级</div>
            <div class="desc-item">
              <span class="lv-icon lv-aa"></span>A级</div>
            <div class="desc-item">
              <span class="lv-icon lv-bb"></span>B级</div>
            <div class="desc-item">
              <span class="lv-icon lv-cc"></span>C级</div>
            <div class="desc-item">
              <span class="lv-icon lv-dd"></span>D级</div>
          </div>
          <div class="item-wrapper"
               v-loading="loading">
            <router-link :to="{ path:'/hero/person', query:{'id': item.id, 'name': item.staffName } }"
                         tag="div"
                         class="item-box frame-red"
                         v-for="(item, index) in heroList"
                         :key="index">
              <div class="frame-box frame-red">
                <div class="lv-logo"
                     :class="getLv(item.levelName)"></div>
                <div class="bottom-wrapper">
                  <div class="item-name"
                       :class="getColor(item.positionCode)">{{ item.staffName }}</div>
                  <div class="item-state">
                    <span style="">项目：</span>
                    <div style="width: 137px;">
                      <router-link tag="span"
                                   :to="{ path:'/projects/project',query:{'id': project.id} }"
                                   v-for="(project, indexs) in item.doingProject"
                                   :key="indexs">
                        <el-popover placement="top"
                                    width="15px"
                                    trigger="hover">
                          <div class="project-info">
                            <p>{{ project.projectName }}</p>
                          </div>
                          <span slot="reference"
                                class="ring-icon"
                                :class="getColor(project.phaseName)"></span>
                        </el-popover>
                      </router-link>
                    </div>
                  </div>
                  <p class="item-date">空闲时段：<span v-if="item.endTime == '1970-01-01 00:00:00'"
                          class="date-time">{{getTime(item.startTime)}} 之后</span><span v-if="item.endTime&& item.endTime!= '1970-01-01 00:00:00'"
                          class="date-time">{{getTime(item.startTime)}}至{{getTime(item.endTime)}}</span></p>
                </div>
              </div>
              <div class="item-img">
                <div class="bg-img"
                     :style="{backgroundImage:'url(' +item.imageUrl+')'}"></div>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <bottom-tab class="bottom-bar"></bottom-tab>
    <router-view class="hero-view"></router-view>
  </div>
</template>

<script>
import topBar from "@/components/top-bar";
import topHead from "@/components/top-head";
import bottomTab from "@/components/bottom-tab";

let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");

export default {
  components: {
    "top-bar": topBar,
    "top-header": topHead,
    "bottom-tab": bottomTab
  },
  data() {
    return {
      input_value: "",
      levelCode: "",
      person_value: "",
      lvArr: [],

      options: [
        {
          name: "新兴产业"
        },
        {
          name: "老旧产业"
        },
        {
          name: "可发展产业"
        }
      ],
      loading: true,
      pageIndex: 1,
      pageSize: 12,
      groupId: "",
      levelCode: "",
      staffName: "",
      workCard: "",
      heroList: [],
      pageCount: ""
    };
  },
  mounted() {
    this.getHero();
    this.getDictArr();
    var self = this;
    $("#hero").scroll(function() {
      // console.log($("#projects"));
      var pheight = $("#hero")[0].scrollHeight; //获取页面高度
      var sheight = $("#hero")[0].offsetHeight; //获取滚动条高度，[0]是为了把jq对象转化为js对象
      var stop = $("#hero").scrollTop(); //滚动条距离顶部的距离
      if (stop >= pheight - sheight-200) {
        //当滚动条到顶部的距离等于滚动条高度减去窗口高度时
        // queryMailList();
        self.getMoreInform();
        // console.log("到底了！");
      }
    });
  },
  methods: {
    getLv (level) {
      switch (level) {
        case "A":
          return "lv-aa";
          break;
        case "B":
          return "lv-bb";
          break;
        case "C":
          return "lv-cc";
          break;
        case "D":
          return "lv-dd";
          break;
        case "S":
          return "lv-ss";
          break;
      }
    },
    getColor(name) {
      switch (name) {
        case "需求评估":
          return "orange";
          break;
        case "设计":
          return "red";
          break;
        case "手板":
          return "blue";
          break;
        case "开模样机":
          return "green";
          break;
        case "小批量验证":
          return "yellow";
          break;
        case "批量生产":
          return "pink";
          break;
        case 1001:
          return "red";
          break;
        case 1002:
          return "blue";
        case 1003:
          return "purple";
        case 1004:
          return "orange";
        default:
          return "red";
          break;
      }
    },
    getDictArr() {
      let url = CONSTANT.URL.SYSTEM.LOADDICTIONARY;
      let data = {};
      common.requestAjax(url, JSON.stringify(data), null, res => {
        this.lvArr = res.data.bussData.level;
      });
    },
    getMoreHero() {
      this.loading = true;
      let url = CONSTANT.URL.HERO.GETHEROBYPAGE;
      let data = {
        groupId: this.groupId,
        levelCode: this.levelCode,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        staffName: this.staffName ? this.staffName : null,
        workCard: this.workCard
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData;
        this.heroList = this.heroList.concat(data);
        this.pageCount = res.data.pageCount;
        this.loading = false;
        // console.log('所有数据', this.heroList);
      });
    },
    findHero() {
      this.pageIndex = 1
      this.getHero()
    },
    getHero() {
      this.loading = true;
      let url = CONSTANT.URL.HERO.GETHEROBYPAGE;
      let data = {
        groupId: this.groupId,
        levelCode: this.levelCode,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        staffName: this.staffName ? this.staffName : null,
        workCard: this.workCard
      };
      common.requestAjax(url, JSON.stringify(data), null, res => {
        let data = res.data.bussData;
        this.heroList = data;
        this.pageCount = res.data.pageCount;
        this.loading = false;
        // console.log('所有数据', this.heroList);
      });
    },
    getTime(time) {
      return time.slice(5, 10);
    },
    getMoreInform() {
      // console.log(this.pageCount);
      if (this.pageCount > this.pageIndex && this.loading === false) {
        this.pageIndex++;
        this.getMoreHero();
      }
    }
  }
};
</script>

<style scoped>
#hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.wrapper {
  min-height: calc(100vh - 210px);
  padding-bottom: 210px;
  background-color: rgba(245, 245, 245, 1);
}
.bottom-bar {
  position: relative;
  left: 0;
  bottom: 0;
  margin-top: -210px;
  clear: both;
}
.main {
  padding-bottom: 42px;
}
.choose-box {
  width: 1200px;
  margin: 30px auto;
  display: flex;
  align-items: center;
}
.choose-item {
  margin-right: 40px;
  width: 245px;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
}
.choose-item .el-input,
.choose-item .el-select {
  width: 160px;
  font-size: 14px;
}
.choose-btn {
  width: 70px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: rgba(195, 24, 31, 1);
  border-radius: 4px;
  color: #ffffff;
  cursor: pointer;
}
.main-box {
  width: 1140px;
  background-color: #fff;
  margin: 0 auto;
  padding: 30px 0px 55px 46px;
}
.main-desc {
  width: 1000px;
  margin: 0 auto 30px;
  font-size: 14px;
  color: rgba(195, 24, 31, 1);
  display: flex;
  justify-content: space-between;
  padding-right: 46px;
}
.desc-item {
  color: rgba(51, 51, 51, 1);
}
.square-icon {
  width: 14px;
  height: 14px;
  background-color: #000;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
.square-icon.red {
  background: rgba(195, 24, 31, 1);
}
.square-icon.blue {
  background: rgba(59, 101, 237, 1);
}
.lv-icon {
  width: 31px;
  height: 27px;
  margin: 0 5px;
  display: inline-block;
  vertical-align: middle;
}
.item-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.item-box {
  width: 238px;
  height: 332px;
  margin-top: 30px;
  margin-right: 46px;
  cursor: pointer;
}
/* .item-box:nth-child(4n+1){
  margin-right: 0;
} */
.item-box:hover {
  -webkit-transform: scale(1.04);
  transform: scale(1.04);
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -webkit-opacity: 1;
  -ms-opacity: 1;
  opacity: 1;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
}
.frame-box {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.frame-red {
  background: url(../../assets/frame_red.png) no-repeat 100% 100%;
  background-size: cover;
}
.frame-green {
  background: url(../../assets/frame_green.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-logo {
  position: absolute;
  top: 19px;
  left: 15px;
  width: 36px;
  height: 29px;
}
.item-img {
  position: relative;
  top: -332px;
  width: 238px;
  height: 332px;
  z-index: 0;
  background-color: #ddd;
}
.bg-img {
  width: 238px;
  height: 332px;
  background-size: cover;
  background-repeat: no-repeat;
}
.bottom-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 24px 24px 32px;
}
.item-name {
  padding: 0 10px;
  line-height: 30px;
  height: 30px;
  text-align: center;
  color: #ffffff;
  font-size: 18px;
  display: inline-block;
}
.item-state {
  font-weight: 600;
  font-size: 14px;
  line-height: 25px;
  color: #ffffff;
  display: flex;
}
.item-date {
  font-weight: 600;
  font-size: 12px;
  line-height: 30px;
  height: 30px;
  color: #ffffff;
}
.date-time {
  padding-left: 8px;
}
.ring-icon {
  height: 10px;
  width: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-block;
  vertical-align: middle;
  margin: 0 4px;
}
.hero-view {
  position: relative;
  z-index: 99;
}

.red {
  background: rgba(195, 24, 31, 1);
}
.yellow {
  background: rgba(171, 153, 0, 1);
}
.pink {
  background: rgba(255, 0, 144, 1);
}
.green {
  background: rgba(44, 171, 0, 1);
}
.orange {
  background: rgba(255, 152, 0, 1);
}
.blue {
  background: rgba(59, 101, 237, 1);
}
.purple {
  background: #9b3bed;
}
.lv-aa {
  background: url(../../assets/lv_aa.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-bb {
  background: url(../../assets/lv_bb.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-cc {
  background: url(../../assets/lv_cc.png) no-repeat 100% 100%;
  background-size: cover;
}
.lv-dd {
  background: url(../../assets/lv_dd.png) no-repeat 100% 100%;
  background-size: contain;
}
.lv-ss {
  background: url(../../assets/lv_ss.png) no-repeat 100% 100%;
  background-size: 100% 100%;
}
</style>